<template>
  <div class="comment-list">
    <!-- 留言区(无留言) -->
    <mu-sub-header>留言</mu-sub-header>

    <!-- 留言区 -->
    <abstract-page ref="pager" :fetcher="fetcher" pagin-position="bottom">
      <template #default="{ source, noData }">
        <div v-if="noData" class="comment-list-list">
          <mu-flex justify-content="center">
            <span>暂时没有留言哦</span>
          </mu-flex>
        </div>
        <ul v-else class="comment-list-list">
          <comment-list-item
            v-for="item in source"
            :key="item.id"
            :comment="item"
            @refresh="refresh"
          />
        </ul>
      </template>
    </abstract-page>
  </div>
</template>

<script>
import CommentListItem from './CommentListItem'
import AbstractPage from '@/components/AbstractPage'

export default {
  name: 'CommentList',
  components: {
    AbstractPage,
    CommentListItem
  },
  props: {
    qid: {
      type: Number,
      required: true
    },
    fetcher: {
      type: Function,
      required: true
    }
  },
  watch: {
    qid() {
      this.refresh()
    }
  },
  methods: {
    // 刷新
    refresh() {
      this.$refs.pager.refresh()
    }
  }
}
</script>

<style scoped>
.comment-list-list {
  list-style: none;
}
</style>
